<template>
  <dv-border-box-12 class="box">
    <div :id="id" :style="{height:height,width:width} " />
  </dv-border-box-12>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import { fetchRegionData } from '@/api/home'
import resize from '@/components/Charts/mixins/resize'
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      // default: '300px%'
      default: '100%'
    },
    height: {
      type: String,
      default: '325px'
    }
  },
  data() {
    return {
      chart: null,
      flag: false,
      regionData: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      this.updateChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    updateChart() {
      fetchRegionData().then((res) => {
        this.regionData = res.data.regionData
        this.chart.setOption({
          series: [
            {
              data: this.regionData.sort((a, b) => {
                return a.value - b.value
              })
            }
          ]
        })
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption({
        title: {
          text: '设备数量分布',
          top: '9%',
          left: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 20,
          top: 60,
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            name: '分布',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            roseType: true,
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              length: 0,
              smooth: true
            },
            label: {
            }
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.box {
  /*box-shadow: 0 4px 8px 0 rgba(31, 29, 29, 0.2);*/
  transition: 0.3s;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 rgb(21, 20, 20);
  /*background-color: #2c3e50;*/
  /*background-color: #536170;*/
  /*background-color: #162d7d;*/
}
/*.box:hover {*/
/*  box-shadow: 0 8px 16px 0 rgb(21, 20, 20);*/
/*}*/
</style>
